<template>
  <div class="error-container">
    <div class="animated-bg">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
      <div class="particles-container">
        <div class="particle" v-for="i in 20" :key="i"></div>
      </div>
      <div class="light-beam"></div>
    </div>
    
    <div class="error-content">
      <div class="error-card">
        <div class="card-glow"></div>
        
        <div class="error-icon">
          <div class="server-icon">
            <div class="server-light"></div>
          </div>
        </div>
        
        <div class="error-info">
          <h1 class="error-code">{{ errorCode }}</h1>
          <h2 class="error-title">{{ errorTitle }}</h2>
          <p class="error-message">{{ errorMessage }}</p>
          <p class="error-description">{{ errorDescription }}</p>
        </div>
        
        <div class="error-actions">
          <el-button type="primary" @click="goHome" class="home-button">
            返回首页
          </el-button>
          <el-button @click="refresh" class="refresh-button">
            刷新页面
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, computed } from 'vue';
import { useRouter } from 'nuxt/app';

const router = useRouter();
const props = defineProps({
  error: Object
});

// 获取错误代码
const errorCode = computed(() => {
  if (props.error?.statusCode) {
    console.log(props.error);
    
    return props.error.statusCode;
  }
  
  // 检查错误消息是否包含localStorage
  if (props.error?.message && props.error.message.includes('localStorage is not defined')) {
    return 500;
  }
  
  return props.error?.statusCode || 500;
});

// 根据错误代码设置不同的错误信息
const errorTitle = computed(() => {
  if (props.error?.message && props.error.message.includes('localStorage is not defined')) {
    return '客户端存储错误';
  }
  
  switch(errorCode.value) {
    case 404:
      return '页面不存在';
    case 403:
      return '访问被拒绝';
    case 401:
      return '未授权访问';
    default:
      return '服务器错误';
  }
});

const errorMessage = computed(() => {
  if (props.error?.message && props.error.message.includes('localStorage is not defined')) {
    return 'localStorage 未定义，可能是在SSR环境下访问了客户端存储';
  }
  
  switch(errorCode.value) {
    case 404:
      return '抱歉，您访问的页面不存在';
    case 403:
      return '抱歉，您没有权限访问此页面';
    case 401:
      return '抱歉，请先登录后再访问';
    default:
      return '抱歉，服务器遇到了一些问题';
  }
});

const errorDescription = computed(() => {
  if (props.error?.message && props.error.message.includes('localStorage is not defined')) {
    return '请确保在客户端环境下访问localStorage，使用typeof window !== "undefined"进行判断';
  }
  
  switch(errorCode.value) {
    case 404:
      return '请检查您输入的URL是否正确，或返回首页';
    case 403:
      return '如果您认为这是一个错误，请联系管理员';
    case 401:
      return '点击返回首页登录后再试';
    default:
      return '我们的团队已经收到通知，正在修复中...';
  }
});

onMounted(() => {
  // 随机生成粒子位置
  const particles = document.querySelectorAll('.particle');
  particles.forEach((particle) => {
    const x = Math.random() * 100;
    const delay = Math.random() * 6;
    const size = Math.random() * 4 + 2;
    const duration = Math.random() * 4 + 4;
    
    particle.style.left = `${x}%`;
    particle.style.width = `${size}px`;
    particle.style.height = `${size}px`;
    particle.style.animationDelay = `${delay}s`;
    particle.style.animationDuration = `${duration}s`;
  });
});

// 处理刷新
const refresh = () => {
  window.location.reload();
};

// 处理返回首页
const goHome = () => {
  router.push('/');
};
</script>

<style lang="scss" scoped>
.error-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: #f5f7fa;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%);
  position: relative;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  
  .shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, #6366f1, #8b5cf6);
    filter: blur(60px);
    opacity: 0.15;
    animation: float 15s infinite ease-in-out;
    
    &.shape-1 {
      width: 400px;
      height: 400px;
      top: -100px;
      right: -100px;
      animation-delay: 0s;
    }
    
    &.shape-2 {
      width: 300px;
      height: 300px;
      bottom: -80px;
      left: -80px;
      background: linear-gradient(45deg, #3b82f6, #06b6d4);
      animation-delay: -5s;
    }
    
    &.shape-3 {
      width: 200px;
      height: 200px;
      bottom: 30%;
      right: 10%;
      background: linear-gradient(45deg, #ec4899, #8b5cf6);
      animation-delay: -10s;
    }
    
    &.shape-4 {
      width: 250px;
      height: 250px;
      top: 20%;
      left: 10%;
      background: linear-gradient(45deg, #10b981, #3b82f6);
      animation-delay: -15s;
    }
  }
  
  .particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    
    .particle {
      position: absolute;
      width: 6px;
      height: 6px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 10px 2px rgba(99, 102, 241, 0.8);
      opacity: 0;
      animation: particle-float 6s infinite ease-out;
    }
  }
  
  .light-beam {
    position: absolute;
    width: 200%;
    height: 200px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0) 0%, rgba(99, 102, 241, 0.1) 50%, rgba(99, 102, 241, 0) 100%);
    transform: rotate(-45deg);
    top: -100px;
    left: -100%;
    animation: light-sweep 8s infinite ease-in-out;
    pointer-events: none;
  }
}

.error-content {
  width: 100%;
  max-width: 520px;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.error-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 10px 30px rgba(99, 102, 241, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  
  .card-glow {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: linear-gradient(45deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
    border-radius: 20px;
    z-index: -1;
    filter: blur(30px);
    opacity: 0.5;
    animation: glow-pulse 3s infinite alternate;
    pointer-events: none;
  }
}

.error-icon {
  margin-bottom: 25px;
  
  .server-icon {
    width: 100px;
    height: 120px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
    
    &::before {
      content: '';
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      height: 15px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 4px;
      box-shadow: 0 25px 0 rgba(255, 255, 255, 0.2), 0 50px 0 rgba(255, 255, 255, 0.2);
    }
    
    .server-light {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ff4d4d;
      right: 15px;
      bottom: 15px;
      box-shadow: 0 0 10px #ff4d4d;
      animation: blink 2s infinite;
    }
  }
}

.error-info {
  text-align: center;
  margin-bottom: 30px;
  
  .error-code {
    font-size: 56px;
    font-weight: 700;
    margin: 0 0 10px 0;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 30%, #a855f7 60%, #6366f1 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: gradientShift 4s ease-in-out infinite;
  }
  
  .error-title {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin: 0 0 15px 0;
  }
  
  .error-message {
    font-size: 16px;
    color: #555;
    margin-bottom: 8px;
  }
  
  .error-description {
    font-size: 14px;
    color: #888;
  }
}

.error-actions {
  display: flex;
  gap: 15px;
  
  .home-button, .refresh-button {
    height: 44px;
    font-size: 15px;
    border-radius: 12px;
    padding: 0 25px;
    font-weight: 500;
    transition: all 0.3s ease;
  }
  
  .home-button {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border: none;
    color: white;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
    
    &:hover {
      background: linear-gradient(90deg, #4f46e5, #7c3aed);
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3);
    }
  }
  
  .refresh-button {
    border: 1px solid #e2e8f0;
    color: #666;
    
    &:hover {
      border-color: #6366f1;
      color: #6366f1;
      transform: translateY(-2px);
    }
  }
}

// 动画定义
@keyframes float {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  25% {
    transform: translate(15px, -15px) rotate(3deg);
  }
  50% {
    transform: translate(0px, 8px) rotate(0deg);
  }
  75% {
    transform: translate(-15px, -8px) rotate(-3deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@keyframes particle-float {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-20vh) translateX(20px);
    opacity: 0;
  }
}

@keyframes light-sweep {
  0% {
    transform: rotate(-45deg) translateX(-100%);
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: rotate(-45deg) translateX(100%);
    opacity: 0.5;
  }
}

@keyframes glow-pulse {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.6;
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px #ff4d4d;
  }
  50% {
    opacity: 0.5;
    box-shadow: 0 0 5px #ff4d4d;
  }
}

// 响应式设计
@media (max-width: 576px) {
  .error-card {
    padding: 30px 20px;
  }
  
  .error-icon .server-icon {
    width: 80px;
    height: 100px;
  }
  
  .error-info {
    .error-code {
      font-size: 46px;
    }
    
    .error-title {
      font-size: 24px;
    }
  }
  
  .error-actions {
    flex-direction: column;
    width: 100%;
    
    .home-button, .refresh-button {
      width: 100%;
    }
  }
}
</style> 